"use client";
import React from 'react';
import WorkCard from "@/app/components/WorkCard";
import Link from "next/link";
import Modal from "@/app/components/Modal";
import { useState } from "react";
import workData from "@/data/workData.json";

interface interfaceWork {
    image: string;
    title: string;
    contributed:string;
    code_link:string;
    description: string;
    images_and_descriptions: {image: string, description: string}[];
    technology: string;

}

const Works = () => {
    const [selectedWork, setSelectedWork] = useState(workData[0]);

    const [showModal, setShowModal] = useState(false);

    const toggleModal = () => {
        setShowModal(!showModal);
    };

    const handleWorkClick = (event:React.MouseEvent, work: React.SetStateAction<{ image: string; title: string; description: string; time: string; technology: string; contributed: string; code_link: string; images_and_descriptions: { image: string; description: string; }[]; } | { image: string; title: string; description: string; technology: string; contributed: string; code_link: string; images_and_descriptions: { image: string; description: string; }[]; }>) => {
        // @ts-ignore
        toggleModal();
        setSelectedWork(work);
        event.preventDefault();
    }

    return (
        <div className="max-w-7xl grid grid-cols-1 md:grid-cols-4 gap-3 mx-2 md:mx-auto">
            {
                workData.map((work, index) => {
                    // @ts-ignore
                    return (
                        <a key={index} className="cursor-pointer" onClick={toggleModal}>
                            <WorkCard image={work.image} title={work.title} description={work.description} contributed={work.contributed} code_link={work.code_link} images_and_description={work.images_and_descriptions} technology={work.technology} />
                        </a>
                    )
                })
            }
            {showModal && <Modal
                image={selectedWork.image}
                title={selectedWork.title}
                description={selectedWork.description}
                contributed={selectedWork.contributed}
                code_link={selectedWork.code_link}
                technology={selectedWork.technology}
                images_and_descriptions={selectedWork.images_and_descriptions}
                onClose={toggleModal}
            />}
        </div>
    );
};

export default Works;